<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <script>
// Events to show debugging information
// -----------------------------------------------------------------------------------------
Grids.OnDownloadPage = function(G,Row){
G.Debug(4,"Loading rows for page ",Row.id?Row.id:G.GetPageNum(Row)+1);
}
// -----------------------------------------------------------------------------------------
Grids.OnDataReceive = function(G,Source){
if(Source.Row && Source.Row.Level>1){ // Sets deep tree collapsed to not get infinite loop by loading sources of expanded rows again and again
   for(var r=Source.Row.firstChild;r;r=r.nextSibling) r.Expanded = 0;
   }
if(Source.Row) G.Debug(4,"Loaded rows for page ",Source.Row.id?Source.Row.id:G.GetPageNum(Source.Row)+1);
}   
// -----------------------------------------------------------------------------------------
Grids.OnRenderPageFinish = function(G){
G.RecalculateRows(G.Rows.INFO,1);
}
// -----------------------------------------------------------------------------------------
   </script>
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; overflow:hidden; }
      .Tutorial .Main { }

      .Tutorial .WidthP8 { width:240px; height:550px; }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>8. All server paging</h1>
   <h2>Large grid with <b>1,000,000,000</b> root cells and next unlimited child cells</h2>

   <div class="Border" id="Border">
      <div style="float:left; margin-right:20px; margin-bottom:20px;">
         <div class="Xml">Source: 
            <a href='08-Layout.js'>08-Layout.js</a>
            &nbsp;
            <a href='08-Data.js'>08-Data.js</a>
            &nbsp;
            <a href='08-Page.js'>08-Page.js</a>
         </div>
         <div class="Main" style='width:700px; height:550px;'>
            <bdo Debug='info' DebugTag='TGDebug'
               Layout_Url='08-Layout.js' 
               Data_Url='08-Data.js' Data_Method='Get'
               Page_Url='08-Page.js' Page_Method='Get'
               ></bdo>
            <!-- Here is not used Debug='check' because for the column count is slow, but you can set it, the grid is still usable except in IE6/IE7 -->
         </div>
      </div>
      <div style="float:left; margin-bottom:20px;">
         <div style='float:right;'><button onclick='document.getElementById("TGDebug").innerHTML="";'>Clear</button></div>
         <div style='margin-bottom:6px;height:20px;'>Debug information</div>
         <div id='TGDebug' class="WidthP8" style='overflow:auto; background:#EEE; border:1px solid black; padding-left:3px;'></div>
      </div>
   </div>

   <ul>
      <li>
         This example shows very large grid with million of root rows, thousand of columns and unlimited count of child rows.<br />
         This example uses dummy page data Page.xml loaded for every page and child page.<br />
         In real application you need to serve the pages data accordingly to show them in grid.<br /> 
      </li>
      <li>
         As you can see, TreeGrid can display unlimited count of cells, here are displayed <b>billions</b> of cells.<br />
         <b>But, you</b> must be able to serve such data from server side. Implementing server paging for such huge data is really not easy.<br /> 
         You must use fast database and especially effective algorithm to fetch data for individual pages according to sort, filter, group and search settings, if you want to provide these features.<br />
         And also provide the calculations, if you want to show some summary rows in grid.<br />
      </li>
      <li>
         This example sets these attributes for paging, all for Cfg tag:
         <ul>
            <li>
               <h3>Paging</h3><b>='3'</b> for <h4>server root paging</h4><br /> 
               <ul>
               <li>
                  <b>PageLength='100'</b> as expected count of rows at one page, if the page has not set <b>Count</b> attribute.<br />
               </li>
               <li>
                  <b>MaxPages='2'</b> to have only few rendered pages at a time and clear the unused pages soon.<br />
               </li>
               <li>
                  <h3>FastPages</h3><b>='500'</b> to merge unused empty pages to bigger units to not render too many html tags in grid.<br />
                  Bigger number speeds up grid rendering on start, but slightly slows down the rendering of individual pages.<br />
               </li>
               <li>
               <h3>PageLengthDiv</h3><b>='10'</b> divides the height of the FastPages by this number to decrease height of the grid body, 
               because the most browsers have limits in tag heights. <br />
               The usual value is to divide (the whole count of root rows + expanded children) / 500,000 (150,000 if used ColPaging).<br />
               </li>
               </ul>
            </li>
            <li>
               <h3>ChildPaging</h3><b>='3'</b> for <h4>server child paging</h4><br />
               <ul>
               <li>
               <b>RemoveCollapsed='2'</b> to clear the children when its parent becomes collapsed. It does not clear the data, only html display.
               </li>
               </ul>
            </li>
            <li>
               <h3>ChildParts</h3><b>='2'</b> for <h4>client paging of expanded children</h4><br />
               <i>The client ChildParts with server ChildPaging provides <b>server paging</b> also for the expanded children.</i><br />
               <ul>
               <li>
               <b>ChildPartLength='100'</b> specifies count of children in one child part.<br />
               In this example it is set to maximum of the immediate children in one parent, so it renders (and also loads due ChildPaging='3') all children at once, but always on demand / scroll.<br />
               </li>
               <li>
               <b>ChildPartMin='0'</b> specifies count of children always rendered on start.<br />
               Because of server child paging here, the children always need to be loaded first, so they cannot be rendered immediately.<br /> 
               </li>
               <li>
               <b>MaxChildParts='4'</b> to have only few rendered child parts at a time and clear the unused child parts soon.<br />
               </li>
               </ul>
            </li>
            <li>
               <h3>ColPaging</h3><b>='2'</b> for <h4>client column paging</h4><br />
               <i>Columns in TreeGrid can be paged only on client, the downloaded page must always contain data for all columns.</i><br />
               <ul>
               <li>
               <b>ColPageLength='10'</b> specifies how many columns will be in one column page. <br />
               The size of column page is usually slightly wider than grid area reserved for the variable columns.<br />
               </li>
               <li>
               <b>ColPageMin='0'</b> specifies how many columns will be always shown on the left.<br />
               In this example no special column is on left, so minimal value is used to speed the grid up.<br />
               </li>
               <li>
               <b>MaxColPages='2'</b> to have only few rendered column pages at a time and clear the unused column pages soon.<br />
               </li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialPaging\s*=\s*(\d+)/), TGIndex = 128;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridPaging8", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialPaging="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>